<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康数据可视化</title>
    <link rel="stylesheet" href="../static/login.css">
    <script>
        let hasAlerted = false;

        function validateUsername() {
            const username = document.querySelector('input[name="username"]').value;
            const regex = /^\d{8}$/;
            if (!regex.test(username)) {
                if (!hasAlerted) {
                    alert('账号必须为 8 位整数');
                    hasAlerted = true;
                }
            } else {
                // 当输入符合要求时，重置标志位
                hasAlerted = false;
            }
        }
    </script>
</head>
<body>
    <div class="container right-panel-active">
        <!-- Sign Up -->
        <div class="container__form container--signup">
            <form action="/register" class="form" method="post" id="form1">
                <h2 class="form__title">注册账号</h2>
                <input type="text" name="username" placeholder="账号" class="input" onblur="validateUsername()" title="请输入 8 位整数">
                <input type="password" name="password" placeholder="密码" class="input" title="请输入密码">
                <button class="btn">注册</button>
            </form>
        </div>

        <!-- Sign In -->
        <div class="container__form container--signin">
            <form action="/login" class="form" method="post" id="form2">
                <h2 class="form__title">登录账号</h2>
                <input type="text" name="username" placeholder="账号" class="input" />
                <input type="password" name="password" placeholder="密码" class="input" />
                <button class="btn">登录</button>
            </form>
        </div>

        <!-- Overlay -->
        <div class="container__overlay">
            <div class="overlay">
                <div class="overlay__panel overlay--left">
                    <button class="btn" id="signIn">已有账号，立马登录</button>
                </div>
                <div class="overlay__panel overlay--right">
                    <button class="btn" id="signUp">没有账号，立马注册</button>
                </div>
            </div>
        </div>
    </div>
    <script src="../static/login.js"></script>
</body>
</html>